Get fonts, glorious fonts
If you've been developing web sites for awhile, you've probably used the FACE attribute of the FONT tag to assign a specific font (or series of fonts) to your text. Unfortunately, determining a font's size is much more difficult because the SIZE attribute is relative to the user's font settings in the browser preferences. With style sheets, you can define a font family or series of families--plus point size, weight, decoration, color, and other attributes--for a specific tag or an arbitrary section of text.

Save time and typing
Have you ever wanted to use a different font for tables of data? Whether you opt for CODE or FONT FACE="fontName", you can't apply your tag to the whole table at once. Instead, you have to wrap it around the contents of each and every TD. With styles, you can assign a font to the TD tag once, and the contents of every table cell will be affected.

Data entry 1 Data entry 2
Data entry 3 Data entry 4

You might still be willing to type all those FONT FACE tags in your table, but what if you have a table on every page? What if you go to all the trouble of assigning FONT FACE="Comic Sans MS" to all the bold type on your site, and then the art director decides she would rather use Arial? With styles, you can keep a master stylesheet and link it to each of your pages. Then, whenever you add to, subtract from, or adjust your styles, all the pages of your site are automatically updated. You can also override the master styles--or extend them--for a particular page if you need to.

Gain control
Now you can decide how big--and what color--H1 headers are.

Believe it or not, this is an H1 header

You can decide that you want TDs to be in a 9 pt gray monospaced font, but an H2 inside a TD to be 18pt black sans-serif.

This is an H2 header in a table cell.

TD 1 TD 2
TD 3 TD 4

You can decide that all disclaimers on your site will be in 8pt Times.

This print is fine enough to be in a luxury vehicle lease commercial.

You can say that henceforth a BLOCKQUOTE will be indented 75 pixels on both the left and right, eliminating the need for several nested BLOCKQUOTEs to achieve a narrow column of text.

(Or you could set P, BODY, or .indentedText to have padding of 75 pixels, and BLOCKQUOTEs could indent further from that.)

Start stylin'
Have a look at the code that created this page to see what style syntax looks like, or learn how to create styles easily with Dreamweaver. Either way, you'll be stylin'.


* Note: This sample only works in Netscape Communicator 4.0 and Internet Explorer 3.0 and later.